<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <title>LayUI表单元素生成工具 - 爱思英语</title>
    <!--<link rel="stylesheet" href="http://static.24en.com/layui/css/layui.css">-->
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
    <!--<script src="./layui.js"></script>-->
    <!--<script src="http://static.24en.com/js/jquery.min.js"></script>-->
    <meta name="description" content="用于LAYUI表单组件生成,命令生成功能使得极速开发表单。常用组件如input,select,textarea,button等元素组件可视化选择生成,简单鼠标就可轻松生成." />
    <meta name="keywords" content="layui,layui表单,layui表单生成,layui表单生成工具,表单生成,生成工具" />

    <style>
        .btn_mode_hide{display:none;}.layui-btn.layui-this{background:#5FB878;border-color:#5FB878;color:#fff;}.layui-input-block p{line-height:36px;}.footer{margin-top:50px;clear:both;overflow:hidden;padding:20px 0;background-color:#2F4056;height:auto;position:relative;bottom:0;margin-bottom:0;width:100%;}.footer.logo{margin-top:20px;text-align:center;}.footer.text{margin-top:15px;text-align:center;font-size:14px;color:#486080;}.footer.text P{line-height:20px;}.footer.text p a{color:#486080;}.footer.text p a:hover{color:#01AAED;}.footer.logo.layui-icon{font-size:30px;color:#668dc1;}.line{width:100%;border-bottom:1px solid#d2d2d2;height:1px;margin:20px 0;}.main{}#tool-base{display:block;}#tool-code{display:none;}
    </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">基础信息</li>
        <li>数据接口信息</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <form id="myform" lay-filter="progress-barform" class="layui-form layui-form-pane" action="" style="margin: 5px">
                <div class="layui-form-item">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-block" >
                        <input id="id" lay-filter="test1" type="text" name="id" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">变量</label>
                    <div class="layui-input-block" >
                        <input id="var" lay-filter="test1" type="text" name="var" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block" >
                        <input id="name" lay-filter="test1" type="text" name="name" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标识</label>
                    <div class="layui-input-block" >
                        <input id="elem" lay-filter="test1" type="text" name="elem" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block" >
                        <input id="id_" lay-filter="test1" type="text" name="idProgressbarin" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block" >
                        <input id="text" lay-filter="test1" type="text" name="text" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">背景颜色</label>
                    <div class="layui-input-block" >
                        <input type="radio" name="color" value="layui-bg-cyan" title="原始" lay-filter="progress-bar_color">
                        <input type="radio" name="color" value="layui-bg-cyan" title="青色" lay-filter="progress-bar_color">
                        <input type="radio" name="color" value="layui-bg-gray" title="灰色" lay-filter="progress-bar_color">
                        <input type="radio" name="color" value="layui-btn-warm" title="橙色" lay-filter="progress-bar_color">
                        <input type="radio" name="color" value="layui-bg-red" title="红色" checked="" lay-filter="progress-bar_color">
                        <input type="radio" name="color" value="layui-bg-black" title="黑色" lay-filter="progress-bar_color">
                        <input type="radio" name="color" value="layui-bg-blue" title="蓝色" lay-filter="progress-bar_color">
                        <input type="radio" name="color" value="layui-bg-green" title="绿色" disabled="" lay-filter="progress-bar_color">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block" >
                        <input type="radio" name="icon" value="layui-bg-cyan" title="原始" lay-filter="progress-bar_icon">
                        <input type="radio" name="icon" value="layui-bg-cyan" title="青色" lay-filter="progress-bar_icon">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">说明</label>
                    <div class="layui-input-block" >
                        <input id="remarks" lay-filter="test1" type="text" name="remarks" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--htmlId;-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">代码</label>
                    <div class="layui-input-block" >
                        <textarea placeholder="请输入内容" class="layui-textarea" name="code"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block" >
                        <input id="description" lay-filter="test1" type="text" name="description" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>设定各种参数</legend>
                </fieldset>
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">宽高</label>
                            <div class="layui-input-inline" style="width: 98px;">
                                <input type="tel" name="width" value="600" autocomplete="off" placeholder="width" class="layui-input demoSet">
                            </div>
                            <div class="layui-input-inline" style="width: 98px;">
                                <input type="tel" name="height" value="280" autocomplete="off" placeholder="height" class="layui-input demoSet">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">动画类型</label>
                        <div class="layui-input-block">
                            <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                                <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="anim" data-value="default">左右切换</button>
                                <button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="updown">上下切换</button>
                                <button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="fade">渐隐渐显</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">箭头状态</label>
                        <div class="layui-input-block">
                            <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                                <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="arrow" data-value="hover">悬停显示</button>
                                <button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="always">始终显示</button>
                                <button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="none">不显示</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">指示器位置</label>
                        <div class="layui-input-block">
                            <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                                <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-key="indicator" data-type="set" data-value="inside">容器内部</button>
                                <button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="outside">容器外部</button>
                                <button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="none">不显示</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">自动切换</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="switch" lay-skin="switch" checked="" lay-text="ON|OFF" lay-filter="autoplay">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: auto;">时间间隔</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="tel" name="interval" value="3000" autocomplete="off" placeholder="毫秒" class="layui-input demoSet">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="connect_test">连接测试</button>
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">内容2</div>
    </div>
    <input type="hidden" id="html_id_progress-bar_id_color"/>
    <input type="hidden" id="html_id_progress-bar_id_size"/>
    <input type="hidden" id="html_id_progress-bar_id_shape"/>
    <input type="hidden" id="html_id_progress-bar_id_icon"/>
    <input type="hidden" id="html_id_progress-bar_id_showpercent"/>
</div>

</body>
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
    layui.config({base: '../js/'}).use(['jquery','baajax','form','slider','element'], function(){
        var form = layui.form;
        var slider = layui.slider;
        var ajax=layui.baajax;
        // var carousel=layui.carousel;
        var $=layui.jquery;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var buttonidvalue=parent.layui.$('#html_id_carousel_id').val();
        alert('当前轮播图 隐藏ID:'+buttonidvalue);
        var button=parent.layui.$('#'+buttonidvalue);
        getInfo();
        // var carousel=parent.layui.carousel;
        // console.log(carousel);
        // var ins3 = carousel.render({
        //     elem: '#'+buttonidvalue
        // });
        // var ins3=parent.layui.ins3;

        var ins3=parent.carouselMap.get(buttonidvalue);
        console.log("ins43");
        console.log(ins3);
        var active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            console.log(this.checked);
            console.log(ins3);
            ins3.reload({
                autoplay: this.checked
            });
            alert(7777777777777);
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            console.log(value);
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
        //监听提交
        form.on('radio(progress-bar_shape)', function(data){
            console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值
            $('#html_id_progress-bar_id_shape').val(data.value);
            // var button=parent.layui.$('#'+buttonidvalue);
            // var parent=button.closest('.layui-progress');
            // alert(parent.html());
            alert(1111111111111);
            // parent.removeClass();
            alert(1111111111111);
            // parent.addClass("layui-progress "+data.value);
        });
        form.on('radio(progress-bar_showpercent)', function(data){
            console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值
            // alert(1111111111111);
            $('#html_id_progress-bar_id_showpercent').val(data.value);
            var parent=button.closest('.layui-progress');
            // parent.removeClass();
            // parent.addClass("layui-progress "+data.value);
            if("true"===data.value){
                parent.attr('lay-showpercent',data.value);
            }else{
                parent.removeAttr("lay-showpercent");
            }
        });
        form.on('radio(progress-bar_color)', function(data){
            console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值
            $('#html_id_progress-bar_id_color').val(data.value);
            // var button=parent.layui.$('#'+buttonidvalue);
            button.removeClass();
            button.addClass("layui-progress-bar "+data.value+" "+$('#html_id_progress-bar_id_size').val());
        });
        form.on('radio(progress-bar_size)', function(data){
            console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值
            $('#html_id_progress-bar_id_size').val(data.value);
            // var button=parent.layui.$('#'+buttonidvalue);
            // button.removeClass();
            // button.addClass("layui-progress-bar "+data.value+" "+$('#html_id_progress-bar_id_color').val());
            var parent=button.closest('.layui-progress');
            // alert(parent.html());
            parent.removeClass();
            parent.addClass("layui-progress "+data.value);
        });
        form.val("progress-barform", {
            "idProgressbarin": buttonidvalue // "name": "value"
            ,"laypercent": button.text() // "name": "value"
            // ,"userflag": data.userflag // "name": "value"
            // ,"check[write]": true
            // ,"switch": flag
            // ,"desc": "我爱layui"
        });

        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                type: "POST",
                url: "/metadatadatabase",
                dataType: "json",
                data: data.field,
                cache: true,
                async: false,
                success: function (data) {
                    if(data.code=='200'){
                        //layer.msg('添加成功');
                        layer.confirm('添加成功,是否继续添加?', {icon: 3, title:'提示'}, function(index){
                            //form.render(null, 'test1');
                            // $("#myform").get(0).reset();
                            layer.close(index);
                        },function(index){
                            //table.refresh();
                            layer.closeAll();
                        });
                    }
                    // var ret = data;
                    // succFunc(ret, paras);
                },
                error: function () {
                    layer.msg('失败');
                    // errorFunc();
                }
            })
            return false;
        });

        //开启输入框
        slider.render({
            elem: '#slideTest8'
            ,value: 80 //初始值
            ,input: true //输入框
        });
        //定义初始值
        slider.render({
            elem: '#slideTest2'
            ,value: 15 //初始值
            ,input: true //输入框
        });

        // //监听连接测试提交
        // form.on('submit(connect_test)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     $.ajax({
        //         type: "POST",
        //         url: "/metadatadatabase/connectTest",
        //         dataType: "json",
        //         data: data.field,
        //         cache: true,
        //         async: false,
        //         success: function (data) {
        //             if(data.code=='200'){
        //                 layer.msg('连接成功');
        //             }else{
        //                 layer.msg('连接失败');
        //             }
        //             // var ret = data;
        //             // succFunc(ret, paras);
        //         },
        //         error: function () {
        //             layer.msg('请求失败');
        //             // errorFunc();
        //         }
        //     })
        //     return false;
        // });
        $('#connectTest').on('click',function(){
            var testflag=true;
            var url=$('#url').val();
            if(url==''){
                layer.msg("数据接口不能为空");
                return;
            }
            ajax.post("/urljson/connectTest", {
                url: url,
                requestMethod:'GET'
            }, function (data) {
                if (data.code !== 200) {
                    layer.msg('请求响应失败');
                    testflag=false;
                    return;
                }else{
                    layer.msg('请求响应成功');
                    layer.alert(data.message);
                }
            });

            // layer.msg("测试成功");
            //解析json结构

            ajax.post("/urljson/structuralStorage", {
                url: url,
                requestMethod:'GET'
            }, function (data) {
                if (data.code !== 200) {
                    layer.msg('json结构解析失败');
                    testflag=false;
                    return;
                }else{
                    layer.msg('json结构解析成功');
                }
            });

if(testflag){
    layer.confirm('是否立即设置数据源信息?', {icon: 3, title:'提示'}, function(index){
        //form.render(null, 'test1');
        layer.close(index);
        var index1 = layer.open({
            type: 2
            , area: ['900px', '400px']
            , title: '数据源绑定'
            , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
            , id: 'addMenuLayer' + 1 //防止重复弹出
            , content: '/static/vipadmin/page/table-data-checkbox-many.html'
            , maxmin: true
            , end: function () {
                // table_metadata_table.reload();
            }//,shade: 0 //不显示遮罩
        });
        // $("#myform").get(0).reset();
        // layer.close(index);
    },function(index){
        //do something
        //alert(index);
        //table.refresh();
        layer.closeAll();
    });
}
        });
        function getInfo(){
            ajax.get("/metadatadatabase/"+$("#layer_metadata_databaseId").val(),{},function (data) {
                //if(data.code=='200'){
                //layer.msg('添加成功');
                $("#id").val(data.id);
                $("#ip").val(data.ip);
                $("#url").val(data.url);
                $("#host").val(data.host);
                $("#port").val(data.port);
                $("#username").val(data.username);
                $("#password").val(data.password);
                $("#description").val(data.description);
                $("#companyName").val(data.companyName);
                $("#companyId").val(data.companyId);
                $("#author").val(data.author);
                // $("#answer").val(data.answer);
                // $("#operator").val(data.operator);
                if(data.userflag===0){
                    $("#switch").prop('checked','checked');
                }else{
                    $("#switch").removeAttr('checked');
                }
                form.render('checkbox');
                //}
            },function () {
                layer.msg('查询失败');
            });
        }
    });
</script>
</html>